<template>
  <PrintBox
    :printRow="printList"
    :isVertical="false"
    :isPageSize="false"
    :checkNum="6"
    :checkLabel="'projectList'"
    id="printBoxqr"
  >
    <template slot="title" slot-scope="scope">
      <div style="margin-bottom: 40px">
        设备校准结果符合性确认表 STET/B/22-3
      </div>
    </template>
    <template slot-scope="scope">
      <!-- 表格  class  table-page  必须-->
      <table
        style="border-collapse: collapse"
        border="1"
        cellspacing="0"
        class="table-page"
        :isVertical="false"
      >
        <tr style="height: 20mm">
          <td colspan="2" style="width: 30mm">设备名称</td>
          <td colspan="4">{{ scope.item.deviceName }}</td>
          <td colspan="2" style="width: 30mm">设备编号</td>
          <td colspan="3" style="width: 70mm">
            {{ scope.item.deviceCode }}
          </td>
        </tr>
        <tr style="height: 20mm">
          <td colspan="2" style="width: 30mm">设备用途</td>
          <td colspan="4">{{ scope.item.useInfo }}</td>
          <td colspan="2" style="width: 30mm">保管部门</td>
          <td colspan="3" style="width: 70mm">
            {{ scope.item.deptName }}
          </td>
        </tr>
        <tr style="height: 20mm">
          <td colspan="2" style="width: 30mm">检定/校准单位</td>
          <td colspan="4">{{ scope.item.codeRange }}</td>
          <td colspan="2" style="width: 30mm">检定/校准周期(月)</td>
          <td colspan="3" style="width: 70mm">
            {{ scope.item.checkPeriod }}
          </td>
        </tr>
        <tr style="height: 20mm">
          <td colspan="2" style="width: 30mm">证书/报告性质</td>
          <td colspan="4">
            <div style="display: flex; justify-content: space-between">
              <div style="display: flex; align-items: center; width: 30mm">
                <input
                  type="checkbox"
                  :checked="scope.item.certTypeValue == '0'"
                />检定证书
              </div>
              <div style="display: flex; align-items: center; width: 30mm">
                <input
                  type="checkbox"
                  :checked="scope.item.certTypeValue == '1'"
                />校准证书
              </div>
            </div>
            <div
              style="
                display: flex;
                align-items: center;
                width: 30mm;
                margin-top: 5mm;
              "
            >
              <input
                type="checkbox"
                :checked="scope.item.certTypeValue == '2'"
              />测试报告
            </div>
          </td>
          <td colspan="2" style="width: 30mm">证书/报告编号</td>
          <td colspan="3" style="width: 50mm">{{ scope.item.code }}</td>
        </tr>
        <tr style="height: 20mm">
          <td colspan="2" style="width: 30mm">设备类型</td>
          <td colspan="9">
            <div style="display: flex; align-items: center">
              <div style="display: flex; align-items: center; width: 20mm">
                <input
                  type="checkbox"
                  :checked="
                    scope.item.deviceTypeValue == 11 ||
                    scope.item.deviceTypeValue == 12
                  "
                />成套设备
              </div>
              （
              <div style="display: flex; align-items: center; width: 20mm">
                <input
                  type="checkbox"
                  :checked="scope.item.deviceTypeValue == 11"
                />主设备
              </div>
              <div style="display: flex; align-items: center; width: 20mm">
                <input
                  type="checkbox"
                  :checked="scope.item.deviceTypeValue == 12"
                />分设备
              </div>
              ）（编号范围：
              <div style="width: 70mm">
                {{ scope.item.codeRange }}
              </div>
              ）
              <div
                style="
                  display: flex;
                  align-items: center;
                  width: 20mm;
                  margin-left: 5mm;
                "
              >
                <input
                  type="checkbox"
                  :checked="scope.item.deviceTypeValue == 2"
                />独立设备
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td rowspan="6" style="width: 5mm; padding: 2mm; line-height: 13px">
            证书报告确认内容
          </td>
          <td colspan="8" style="text-align: left; height: 10mm">
            1、{{ scope.item.contentList[0].contentLabel }}
          </td>
          <td rowspan="1">
            <div style="display: flex; align-items: center">
              <div
                style="display: flex; align-items: center; margin-left: 10mm"
              >
                <input
                  type="checkbox"
                  :checked="scope.item.contentList[0].isSelected == 0"
                />是
              </div>
              <div
                style="display: flex; align-items: center; margin-left: 10mm"
              >
                <input
                  type="checkbox"
                  :checked="scope.item.contentList[0].isSelected == 1"
                />否
              </div>
            </div>
          </td>
        </tr>
        <tr
          v-if="index !== 0"
          ::key="index"
          v-for="(item, index) in scope.item.contentList"
        >
          <td colspan="8" style="text-align: left; height: 10mm">
            {{ index + 1 }}、{{ item.contentLabel }}
          </td>
          <td rowspan="1" style="width: 60mm">
            <div style="display: flex; align-items: center">
              <div
                style="display: flex; align-items: center; margin-left: 10mm"
              >
                <input type="checkbox" :checked="item.isSelected == 0" />是
              </div>
              <div
                style="display: flex; align-items: center; margin-left: 10mm"
              >
                <input type="checkbox" :checked="item.isSelected == 1" />否
              </div>
            </div>
          </td>
        </tr>

        <tr>
          <td rowspan="8" style="width: 5mm; padding: 2mm; line-height: 13px">
            数据确认
          </td>
          <td colspan="2" rowspan="2" style="font-weight: 600; height: 10mm">
            检测项目
          </td>
          <td colspan="2" rowspan="2" style="font-weight: 600">测试结果</td>
          <td colspan="5" rowspan="1" style="font-weight: 600">
            要求(无相应标准、规范、规程要求的参照公司规定)
          </td>
        </tr>
        <tr>
          <td colspan="3" style="font-weight: 600">标准、规范、规程要求</td>
          <td colspan="2" style="font-weight: 600">公司规定</td>
        </tr>
        <tr v-for="(e, i) in 6">
          <td colspan="2" style="width: 42mm">
            {{
              (scope.item.projectList[i] &&
                scope.item.projectList[i].projectName) ||
              ""
            }}
          </td>
          <td colspan="2" style="width: 42mm">
            {{
              (scope.item.projectList[i] && scope.item.projectList[i].result) ||
              ""
            }}
          </td>
          <td colspan="3">
            {{
              (scope.item.projectList[i] &&
                scope.item.projectList[i].request) ||
              ""
            }}
          </td>
          <td colspan="2">
            {{
              (scope.item.projectList[i] &&
                scope.item.projectList[i].companyRequest) ||
              ""
            }}
          </td>
        </tr>
        <tr>
          <td colspan="11" style="height: 60mm">
            <div style="text-align: left">
              <div style="font-weight: 600">根据证书、报告内容可确定:</div>
              <div
                style="margin-left: 10mm"
                ::key="index"
                v-for="(item, index) in scope.item.itemList"
              >
                <input type="checkbox" :checked="item.isSelected == 0" />
                <span v-for="(i, e) in item.contentLabel.split('###')"
                  >{{ i }}
                  <span
                    style="margin: 0 20px"
                    v-if="e == 0 && item.contentValue == 1"
                  >
                    {{ item.param1 }}</span
                  >
                </span>
              </div>
              <!-- <div style="margin-left: 10mm">
                  <input
                    type="checkbox"
                  />根据证书/报告数据、结论判定，该设备校准结果满足()要求，可以使用
                </div>
                <div style="margin-left: 10mm">
                  <input
                    type="checkbox"
                  />根据证书/报告数据、结论判定该设备须降级使用。
                </div>
                <div style="margin-left: 10mm">
                  <input
                    type="checkbox"
                  />根据检测/校准、测试产生的修正因子要对设备进行修正，修正情况。
                </div> -->
            </div>
            <div
              style="
                display: flex;
                justify-content: flex-end;
                text-align: left;
                margin-top: 30px;
              "
            >
              <div style="width: 40mm; position: relative">
                确认人：

                <img
                  style="width: 80px; position: absolute; top: -10px"
                  :src="$VUE_APP_IMG_API + scope.item.esign"
                />
              </div>
              <div style="width: 40mm">
                日期：{{ checkHistoryNode(scope, "start").endTime }}
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="11" style="height: 20mm; position: relative">
            <div
              style="
                position: absolute;
                top: 55px;
                left: 50px;
                width: 500px;
                text-align: left;
              "
            >
              <template v-if="CheckApprove(scope, 'jcbfzr').ShowMessage">
                {{ CheckApprove(scope, "jcbfzr").MessageText }}
              </template>
            </div>
            <div style="text-align: left">
              <div>检测部负责人意见:</div>
            </div>
            <div style="display: flex">
              <div
                style="margin-left: 10mm; display: flex; align-items: center"
              >
                <input
                  type="checkbox"
                  :checked="checkHistoryNodeComment(scope, 'jcbfzr').type == 1"
                />可投入使用
              </div>
              <div
                style="margin-left: 10mm; display: flex; align-items: center"
              >
                <input
                  type="checkbox"
                  :checked="checkHistoryNodeComment(scope, 'jcbfzr').type == 3"
                />不可投入使用
              </div>
            </div>
            <div
              style="
                display: flex;
                justify-content: flex-end;
                text-align: left;
                margin-top: 20px;
              "
            >
              <div style="width: 40mm; position: relative">
                签字：
                <template v-if="CheckApprove(scope, 'jcbfzr').ShowImg">
                  <img
                    style="width: 80px; position: absolute; top: -10px"
                    :src="CheckApprove(scope, 'jcbfzr').ApproveImg"
                  />
                </template>
              </div>
              <div style="width: 40mm">
                日期： {{ checkHistoryNode(scope, "jcbfzr").endTime }}
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="11" style="height: 20mm; position: relative">
            <div
              style="
                position: absolute;
                top: 55px;
                left: 50px;
                width: 500px;
                text-align: left;
              "
            >
              <template v-if="CheckApprove(scope, 'jsfzr').ShowMessage">
                {{ CheckApprove(scope, "jsfzr").MessageText }}
              </template>
            </div>
            <div style="text-align: left">
              <div>技术负责人意见:</div>
            </div>
            <div style="display: flex">
              <div
                style="margin-left: 10mm; display: flex; align-items: center"
              >
                <input
                  type="checkbox"
                  :checked="checkHistoryNodeComment(scope, 'jsfzr').type == 1"
                />同意
              </div>
              <div
                style="margin-left: 20mm; display: flex; align-items: center"
              >
                <input
                  type="checkbox"
                  :checked="
                    checkHistoryNodeComment(scope, 'jsfzr').type == 2 ||
                    checkHistoryNodeComment(scope, 'jsfzr').type == 3
                  "
                />不同意
              </div>
            </div>
            <div
              style="
                display: flex;
                justify-content: flex-end;
                text-align: left;
                margin-top: 20px;
              "
            >
              <div style="width: 40mm; position: relative">
                签字：
                <template v-if="CheckApprove(scope, 'jsfzr').ShowImg">
                  <img
                    style="width: 80px; position: absolute; top: -10px"
                    :src="CheckApprove(scope, 'jsfzr').ApproveImg"
                  />
                </template>
              </div>
              <div style="width: 40mm">
                日期：{{ checkHistoryNode(scope, "jsfzr").endTime }}
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="11" style="text-align: left; font-weight: 600">
            备注:如确认表填写对象为主设备，确认栏中应为成套设备含自身)的总体确认。
          </td>
        </tr>
      </table>
      <!-- 底部信息位置 -->
      <div class="page-bottom" style="page-break-after: always">
        <div class="desc">注：本表格自2021年6月1日起生效</div>
      </div>
    </template>
  </PrintBox>
</template>
<script>
import printStyle from "@/utils/print.js";
import { resultConfirmInfo } from "@/api/device/resultConfirm.js";
export default {
  data() {
    return {
      printList: [],
      formData: {},
    };
  },
  methods: {
    getinfo(id) {
      return resultConfirmInfo(id).then((response) => {
        this.formData = response.data;
      });
    },

    async printBox(e) {
      await this.getinfo(e);
      //infos  勾选的数据 如果有勾选就打印勾选。
      this.printList = [this.formData];
      setTimeout(() => {
        document.title = "设备校准结果符合性确认表 STET/B/22-3";
        this.$print({
          printable: "printBoxqr", //打印区域id
          type: "html", //打印类型是html
          scanStyles: false,
          targetStyles: ["*"],
          style: this.workStyle(),
          onPrintDialogClose: () => {
            document.title = process.env.VUE_APP_TITLE;
          },
        });
      }, 500);
    },
    // 可以自定义样式  printStyle 是公共样式 切勿私自修改
    workStyle() {
      return `${printStyle}
        table,
        table tr th,
        table tr td {
          padding: 4px;
        }
        .desc{
        text-align: left; font-size: 12px; margin-top: 10px
      }
            .df {
                display: flex;
              }
      `;
    },
  },
};
</script>
